import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Table } from 'antd'
import axios from 'axios'

import './home.scss'

export default function Home() {
  const [data, setData] = useState([])
  const [index, setIndex] = useState(0)
  const columns = [
    { title: '地区', dataIndex: 'area' },
    { title: 'Java', dataIndex: 'java' },
    { title: 'PHP', dataIndex: 'php' },
    { title: 'Node', dataIndex: 'node' },
    { title: 'JS', dataIndex: 'js' },
    { title: 'Python', dataIndex: 'python' }
  ]
  useEffect(() => {
    axios.get('/data.json').then(res => {
      res = res.data
      if (res.code === 0) {
        setData(res.data)
      }
    })
  }, [])
  return (
    <div className="home">
      <h1>语言大数据报告</h1>
      <div className="wrap">
        <div className="nav">
          <button
            className={index === 0 ? 'active' : ''}
            onClick={() => setIndex(0)}
          >
            语言动态
          </button>
          <button
            className={index === 1 ? 'active' : ''}
            onClick={() => setIndex(1)}
          >
            语言地图
          </button>
          <button
            className={index === 2 ? 'active' : ''}
            onClick={() => setIndex(2)}
          >
            语言热搜
          </button>
          <button
            className={index === 3 ? 'active' : ''}
            onClick={() => setIndex(3)}
          >
            语言播报
          </button>
        </div>
        <p>数据纯属虚构</p>
        <Table
          pagination={{ pageSize: 4 }}
          bordered
          columns={columns}
          dataSource={data}
        />
        <Link to="/" className="nav-link">
          回首页
        </Link>
      </div>
    </div>
  )
}
